import { Ionicons } from '@expo/vector-icons';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function MessageScreen() {
  return (
    <SafeAreaView className="flex-1 bg-gray-50">
      {/* 顶部标题栏 */}
      <View className="p-4 bg-white border-b border-gray-200 shadow-sm">
        <Text className="text-2xl font-bold text-gray-800">消息</Text>
      </View>

      <ScrollView className="flex-1">
        <View className="p-4">
          {/* 消息列表 */}
          <View className="space-y-4">
            {/* 消息项 */}
            <TouchableOpacity className="bg-white rounded-xl p-4 shadow-sm">
              <View className="flex-row items-center">
                <View className="w-12 h-12 bg-blue-100 rounded-full items-center justify-center mr-3">
                  <Ionicons name="notifications" size={24} color="#3b82f6" />
                </View>
                <View className="flex-1">
                  <View className="flex-row justify-between items-center">
                    <Text className="text-base font-semibold text-gray-800">系统通知</Text>
                    <Text className="text-sm text-gray-500">10:30</Text>
                  </View>
                  <Text className="text-sm text-gray-600 mt-1">您有新的系统消息，请及时查看</Text>
                </View>
              </View>
            </TouchableOpacity>

            <TouchableOpacity className="bg-white rounded-xl p-4 shadow-sm">
              <View className="flex-row items-center">
                <View className="w-12 h-12 bg-green-100 rounded-full items-center justify-center mr-3">
                  <Ionicons name="chatbubble" size={24} color="#10b981" />
                </View>
                <View className="flex-1">
                  <View className="flex-row justify-between items-center">
                    <Text className="text-base font-semibold text-gray-800">客服消息</Text>
                    <Text className="text-sm text-gray-500">昨天</Text>
                  </View>
                  <Text className="text-sm text-gray-600 mt-1">您好，请问有什么可以帮您？</Text>
                </View>
              </View>
            </TouchableOpacity>

            <TouchableOpacity className="bg-white rounded-xl p-4 shadow-sm">
              <View className="flex-row items-center">
                <View className="w-12 h-12 bg-purple-100 rounded-full items-center justify-center mr-3">
                  <Ionicons name="mail" size={24} color="#8b5cf6" />
                </View>
                <View className="flex-1">
                  <View className="flex-row justify-between items-center">
                    <Text className="text-base font-semibold text-gray-800">活动通知</Text>
                    <Text className="text-sm text-gray-500">周一</Text>
                  </View>
                  <Text className="text-sm text-gray-600 mt-1">新活动即将开始，快来参与吧！</Text>
                </View>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
